{% extends 'base.html' %}
{% block content %}
    {#<div class="demoTable">#}
    {#  搜索ID：#}
    {#  <div class="layui-inline">#}
    {#    <input class="layui-input" name="id" id="demoReload" autocomplete="off">#}
    {#  </div>#}
    {#  <button class="layui-btn" data-type="reload">搜索</button>#}
    {#</div>#}

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    <script>
        layui.use('table', function () {
            var table = layui.table;

            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                , url: '/client_list/?client_id={{ client_id }}'
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'id', title: 'id', width: 120, sort: true, fixed: true}
                    , {field: 'laddr', title: '集群节点', width: 200, sort: true}
                    , {field: 'addr', title: '地址和端口', width: 200, sort: true}
                    , {field: 'age', title: '已连接时长(秒)', width: 150, sort: true}
                    , {field: 'idle', title: '空闲时长(秒)', width: 150, sort: true}
                    , {field: 'cmd', title: '上一次命令', sort: true, width: 150}
                ]]
                , id: 'testReload'
                , page: true
                , height: 'full-150'
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    table.reload('testReload', {
                        where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>

{% endblock %}